<template>
  <div class="home">
    <div>
      <router-view></router-view>
    </div>

    <van-tabbar v-model="active" active-color="#e4393c" route>
      <van-tabbar-item
        v-for="(item, index) in tabbarData"
        :key="index"
        :to="{ name: item.routerName }"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      i: 0,
      timer: null,
      uls: null,
      length: 5,
      navTitle: [],
      active: 0,
      tabbarData: [
        {
          title: "首页",
          routerName: "Home",
          activeIcon: require("../assets/images/home-active.png"),
          inactiveIcon: require("../assets/images/home.png"),
        },

        {
          title: "搜索",
          routerName: "Search",
          activeIcon: require("../assets/images/xunzhao-red.png"),
          inactiveIcon: require("../assets/images/xunzhao-blue.png"),
        },
        {
          title: "动态",
          routerName: "Dynamic",
          activeIcon: require("../assets/images/dynamic-active.png"),
          inactiveIcon: require("../assets/images/dynamic.png"),
        },
        {
          title: "我的",
          routerName: "My",
          activeIcon: require("../assets/images/my-active.png"),
          inactiveIcon: require("../assets/images/my.png"),
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
</style>